<template>
  <div>
      <div id="order-num" style="height: 366px;width: 762px;"></div>
  </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "line1",
        props:{
            x_data:{
                type: Array,
                default:() => []
            },
            y_data:{
                type: Array,
                default:() => []
            }
        },
        mounted(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('order-num'));
            // 绘制图表
            myChart.setOption({
                textStyle: {
                    fontSize: 20,
                    color: '#ffffff'
                },
                legend: {
                    show: true,
                    textStyle: {
                        color:'#fff',
                        fontSize:12
                    },
                    icon:'circle'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        show: true
                    },
                    backgroundColor:'rgba(251, 124, 56, 1)',
                    formatter: '新增订单<br><img src="" alt="">&nbsp;&nbsp;今日{c}笔'
                },
                grid: {
                    left: 40,
                    right: 40,
                    bottom: 40,
                    top: 40
                },
                xAxis: {
                    data: this.x_data,
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(238, 238, 238, 1)'
                        }
                    },
                    min: 1,
                    max: 31
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['rgba(238, 238, 238, 0.25)']
                        }
                    }
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        label: {
                            show: false,
                        },
                        showSymbol: false,
                        areaStyle: {
                            color: 'rgba(254, 125, 56, 0.3)'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.y_data
                    }
                ]
            });
        }
    }
</script>

<style scoped>

</style>
